<template>
	<view class="page">
		<!-- 审核明细 wwl -->
		<view class="tab_row">
			<view class="row" :class="tabActive == item.status  ?'active_row' :''" v-for="(item,index) in tabList"
				:key='index' @click="changeTab(item.status,index)">
				{{item.name}}
			</view>
		</view>
		<swiper class="tab_data_box" :current='tabIndex' :duration="300" @change="onswiperchange">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<scroll-view style="height:100%;padding-bottom: 20rpx;box-sizing: border-box;" enableBackToTop="true"
					scroll-y="true" >
					<!-- @scrolltolower="loadMore" -->
					<view style="min-height:50vh" class="info_list">
						<block v-if="AllList[tabIndex].data.length > 0">
							<view class="info_row" v-for="(row, index) in AllList[tabIndex].data" :key="index">
								<view class="top_info">
									<view class="top_info_row top_info_row1">
										<view><text>{{row.role_name}}</text><text style="margin-left: 20rpx;">{{row.zone_name}}</text></view>
										<view
											:class=" tabIndex== 0 ? 'right_text1' : tabIndex== 1 ? 'right_text2' :'right_text3'">{{tabList[tabIndex].name}}</view>
									</view>
									<view class="top_info_row top_info_row1">
										<view class="">
											<text>{{row.name}}</text><text style="margin-left: 20rpx;">{{row.phone}}</text>
										</view>
										<view v-if="row.status == 2 && row.remark" class="operation_text" @click="rejectInfo.text = row.remark;rejectInfo.visible = true">
											查看原因
										</view>
									</view>
									<view class="top_info_row">
										<text>办公地址：{{row.address}}</text>
									</view>
									<view class="top_info_row">
										<text>其他联系电话：{{row.other_phone}}</text>
									</view>
									<view class="top_info_row">
										<text>申请时间：{{row.created_at}}</text>
									</view>
									<view class="top_info_row2">
										<view class="text">
											身份证国徽面：
										</view>
										<image :src="row.id_card_z" mode="scaleToFill"></image>
									</view>
									<view class="top_info_row2">
										<view class="text">
											身份证人脸面：
										</view>
										<image :src="row.id_card_f" mode="scaleToFill"></image>
									</view>
								</view>
								<view class="bottom_info_box" v-if="tabIndex == 0">
									<view class="">
										<button class="btn" :loading="loadingOperation == true && idOperation == row.id + 'reject'" @click="onReject(row.id,index)">驳回</button>
									</view>
									<view class="">
										<button class="btn btn1"  :loading="loadingOperation == true && idOperation == row.id +'adopt' " @click="onAdopt(row.id,index)">审核通过</button>
									</view>
								</view>
							</view>
						</block>
						<empty v-else />
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-popup v-model="rejectObj.visible" mode='center' width="80%" height="auto" :maskCloseAble='false'>
			<view class="reject_popup">
				<view class="title">
					<text class="title_text" >驳回原因</text>
					<view  class="icon" @click='onCloseReject()'>
						<n-icon name="close" size="38" color="#666"></n-icon>
					</view>
				</view>
				<textarea class="text" v-model="rejectObj.text" placeholder="请输入驳回原因" maxlength='200' placeholder-style	="color:#999;font-size:26rpx" />
				<button class="btn" :loading='rejectObj.loading' @click="saveReject()">确认驳回</button>
			</view>
		</u-popup>
		<u-popup v-model="rejectInfo.visible" mode='center' width="70%" height="auto" >
			<view class="reject_info">
				<view class="text">
					{{rejectInfo.text}}
				</view>
				<button class="btn"  @click="rejectInfo.visible = false">我知道了</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import uPopup from '@/components/u-popup.vue'
	import {setInviteStatus,getInviteList} from "../static/api.js"
	export default {
		components:{uPopup},
		data() {
			return {
				//1 审核通过 2驳回3待审核  默认3
				tabList: [{
						status: 3,
						name: '待审核'
					},
					{
						status: 1,
						name: '审核通过'
					},
					{
						status: 2,
						name: '驳回'
					}
				],
				AllList: [{
						status: 3,
						data: [],
						first: false
					},
					{
						status: 1,
						data: [],
						first: false
					},
					{
						status: 2,
						data: [],
						first: false
					},
				],
				listLoading: false,
				tabActive: 3,
				loading: false,
				tabIndex: 0,
				loadingOperation:false,
				loadingOperation:false,
				idOperation:null,
				rejectInfo:{
					id:'',
					visible:false,
					text:'',
				},
				rejectObj:{
					id:'',
					visible:false,
					text:'',
					loading:false,
				}
			}
		},
		methods: {
			onswiperchange(e) {
				if (this.listLoading) return;
				let index = e.target.current || e.detail.current;
				this.switchTab(this.tabList[index].status, index);
			},
			switchTab(x, i) {
				if (x == this.tabActive) return;
				this.tabActive = x
				this.tabIndex = i
				if (this.AllList[this.tabIndex].first) return;
				this.AllList[this.tabIndex].data = [];
				this.getList();
			},
			changeTab(x, i) {
				this.switchTab(x, i);
			},
			onReject(id,i){
				this.idOperation = id + 'reject'
				this.rejectObj.visible = true
				this.rejectObj.id = id
				this.rejectObj.text= ''
			},
			async saveReject(){
				if(!this.rejectObj.text) return uni.showToast({title:'请输入驳回原因',icon:'none'})
				this.rejectObj.loading = true
				this.getchangeList(this.rejectObj.id,2,this.rejectObj.text)
			},
			onCloseReject(){
				if(this.rejectObj.loading) return
				this.rejectObj.visible = false
			},
			async getchangeList(id,type,remark){
				try{
					var result = await setInviteStatus({id:id,status:type,remark})
					this.loadingOperation = false
					this.rejectObj.loading = false
					this.rejectObj.visible  = false
					this.AllList.forEach((c)=>{
						if(c.status != this.tabActive){
							c.data = []
							c.first = false
						}else{
							this.getList()
						}
					})
					uni.showToast({
						title:'操作成功',icon:'none'
					})
				}catch{
				   this.loadingOperation = false
				   this.rejectObj.loading = false
				   this.rejectObj.visible  = false
				}
			},
			onAdopt(id,i){
				if(this.loadingOperation) return
				this.idOperation =  id + 'adopt'
				uni.showModal({
					title: '提示',
					content: `您确认通过审核吗？`,
					success:async (res)=>{
					  if (res.confirm) {
						   this.loadingOperation = true
						   this.getchangeList(id,1,null)
					  }
					}
				})
			},
			async getList() {
				this.listLoading = true;
				try{
					var res = await getInviteList({type:this.tabActive})
					this.AllList[this.tabIndex].data =  res
					if (!this.AllList[this.tabIndex].first) this.AllList[this.tabIndex].first = true;
					this.listLoading = false
				}catch{
					this.listLoading = false
				}
			},

		},
		onLoad(params) {
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		min-height: 100vh;
		display: flex;
		background-color: #fff;
	}

	.page {
		background-color: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	}

	.tab-box {
		flex: 1;
	}

	.swiper-item {
		flex: 1;
		display: flex;
		padding: 24rpx 28rpx 0;
		width: 100%;
		box-sizing: border-box;
		flex-direction: column;
	}

	.tab_row {
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #ebebef;
		.row {
			flex: 1;
			text-align: center;
			color: #999999;
			font-size: 28rpx;
			line-height: 40rpx;
		}
		.active_row {
			color: #36353A;
			position: relative;
			&::before {
				position: absolute;
				width: 52rpx;
				height: 6rpx;
				background: $theme;
				left: 50%;
				bottom: -20rpx;
				transform: translateX(-50%);
			}
		}
	}

	.tab_data_box {
		flex: 1;

		.tab_data_row {
			flex: 1;
			display: flex;
			flex-direction: column;
		}
	}

	.info_list {
		// padding: 0 24rpx;
		// width: 100%;
		// box-sizing: border-box
		&:first-child {
			padding-top: 24rpx;
		}
	}

	.info_row {
		padding: 24rpx 0;
		border: 2rpx solid #ededed;
		margin-bottom: 24rpx;
		border-radius: 16rpx;

		.top_info {
			padding: 0 24rpx;
			width: 100%;
			box-sizing: border-box;

			.right_text1 {
				font-size: 28rpx;
				color: $theme;
				line-height: 40rpx;
			}

			.right_text2 {
				font-size: 28rpx;
				color: #43CF85;
				line-height: 40rpx;
			}

			.right_text3 {
				font-size: 28rpx;
				color: #FF0000;
				line-height: 40rpx;
			}

			.top_info_row {
				font-size: 28rpx;
				color: #101010;
				line-height: 40rpx;
				margin-bottom: 20rpx;
			}

			.top_info_row1 {
				display: flex;
				justify-content: space-between;

				>view:nth-child(1) {
					width: calc(100% - 5em);
				}
				.operation_text{
					color:#999999;
					font-size: 20rpx;
					line-height: 28rpx;
				}
			}

			.top_info_row2 {
				text-align: left;

				&:last-child {
					image {
						margin-bottom: 0;
					}
				}

				view {
					font-size: 28rpx;
					color: #101010;
					line-height: 40rpx;
					margin-bottom: 20rpx;
				}

				image {
					width: 100%;
					height: 414rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		.bottom_info_box {
			margin-top: 24rpx;
			display: flex;
			justify-content:flex-end;
			padding: 24rpx 24rpx 40rpx;
			width: 100%;
			box-sizing: border-box;
			border-top: 2rpx solid #ebebef;
			.btn {
				width: 160rpx;
				height: 60rpx;
				line-height: 58rpx;
				background: #ffffff;
				border: 2rpx solid #d5d5d5;
				border-radius: 8rpx;
				color: #26252A;
				font-size: 28rpx;
			}

			.btn1 {
				width: 160rpx;
				height: 60rpx;
				background: $theme;
				color: #fff;
				border: 2rpx solid $theme;
				border-radius: 8rpx;
				margin-left: 12rpx;
			}
		}
	}

	button[loading]::before {
		align-self: center
	}

	button {
		display: flex;
		justify-content: center;
		align-item: center;
		padding: 0;
	}

	button::after {
		border: none;
	}
	.reject_info{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.text{
			width: 100%;
			box-sizing: border-box;
			margin-top: 30rpx;
			font-size: 26rpx;
			padding: 20rpx;
			color:#333333;
			line-height: 48rpx;
		}
		.btn{
			margin: 0 auto;
			width: 244rpx;
			height: 60rpx;
			line-height: 60rpx;
			background: $theme;
			border-radius: 8rpx;
			font-size: 28rpx;
			color:#fff
		}
	}
	.reject_popup{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 24rpx 30rpx;
		width: 100%;
		box-sizing: border-box;
		.title{
			height: 60rpx;
			line-height: 60rpx;
			padding: 30rpx;
			text-align: center;
			position: relative;
			.title_text{
				font-size: 34rpx;
			}
			.icon{
				position: absolute;
				right: 20rpx;
				top:0%;
			}
		}
		.text{
			width: 100%;
			box-sizing: border-box;
			border:2rpx solid #ebebef;
			margin-top: 30rpx;
			font-size: 26rpx;
			padding: 20rpx;
			color:#666;
			height: 220rpx;
			line-height: 32rpx;
			
		}
		.btn{
			margin-top: 30rpx;
			width: 80%;
			height: 70rpx;
			line-height: 68rpx;
			background: #ffffff;
			border: 2rpx solid #d5d5d5;
			border-radius: 8rpx;
			color: #26252A;
			font-size: 28rpx;
		}
	}

</style>